{include file="public/header" select="0" /}
<style>
    .orderDetailsTop {
        background:linear-gradient(#7FC555 , #85C998);
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 4rem;
    }

    .orderDetailsTop p {
        color: #fff;
        font-size: 1rem;
        font-weight: bold;
    }
    .bottom{
        background: #fff;border-top: 1px solid #f5f5f5;justify-content: right;
    }
</style>
<body>
<div class="title bgc">
    <i class="layui-icon layui-icon-left" onclick="goBack()"></i>
    订单详情
</div>
<div class="orderDetailsTop">
    <p>{$info.status}</p>
</div>
<div class="submit-address" style="margin-top: 0">
    <img src="/static/index/img/circel.png" alt="">
    <div class="submit-address-news submit-address-left choice_address">
        <p><a class="name">{$info.receiver}</a> {$info.receiver_tel}
        </p>
        <p>{$info.p.title}
            {$info.c.title}
            {$info.d.title}
            {$info.t.title}
            {$info.address_details}</p>
    </div>
</div>
<ul class="index-join-container order-list tpl_list" style="padding: 0;">
    <li class="bgc">


        {foreach name="info.products" item="vo"}
        <a href="javascript:;">
            <img src="{$vo.product_image}" alt=""/>
            <div class="index-join-rgt">
                <p>{$vo.product_title}</p>
                <div>
                    <p>￥{$vo.price}</p>
                    <p>x{$vo.num}</p>
                </div>
            </div>
        </a>
        {/foreach}
        <div class="total">实付款：￥{$info.real_amount}</div>

    </li>
</ul>
<ul class="set-form bgc">

    <li>
        订单编号 <p>{$info.sn}</p>
    </li>

    <li>
        下单时间 <p>{$info.create_time}</p>
    </li>
    {if $info->getData('status') == 2}
    <li>
        支付时间 <p>{:date('Y-m-d H:i:s',$info.pay_time)}</p>
    </li>
    {/if}
    {if $info->getData('status') == 3}
    <li>
        物流公司 <p>{$info.express.title}</p>
    </li>
    <li>
        物流单号 <p>{$info.express_code}</p>
    </li>
    {/if}

</ul>
<div class="order-btn bottom" >
    <div>
        {if $info->getData('status') == 1}
        <p data-id="{$info.id}" class="clearOrder" style="border: 1px solid #999;color:#999;">取消订单</p>
        <p class="payment" data-id="{$info.id}">去付款</p>
        {elseif $info->getData('status') == 2}
        {if $info->is_remind}
        <p style="border: 1px solid #999;color:#999;">已提醒发货</p>
        {else}
        <p class="remind" data-id="{$info.id}">提醒发货</p>
        {/if}
        {elseif $info->getData('status') == 3}
        <p class="receipt" data-id="{$info.id}">确认收货</p>
        {else}
        <p style="border: 1px solid #999;color:#999;">已完成</p>
        {/if}
    </div>
</div>
</body>
{include file="public/footer" select="0" /}
<script>
    $('.bottom').on('click', '.clearOrder', function () {
        const id = $(this).attr('data-id');
        edit('clear', id, '确认要取消订单吗？')
    }).on('click', '.remind', function () {
        const id = $(this).attr('data-id');
        edit('remind', id, '是否提醒发货？')
    }).on('click', '.payment', function () {
        const id = $(this).attr('data-id');
        _ajax('{:url("order/edit")}',{type: 'payment', id: id});
    }).on('click', '.receipt', function () {
        const id = $(this).attr('data-id');
        edit('receipt', id, '是否确认收货？')
    });

    function edit(type, id, msg) {
        layer.confirm(msg, {title: '请确认'}, function () {
            _ajax('{:url("order/edit")}',{type: type, id: id});
        });
    }
</script>